<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style type="text/css">
      .main{height:100%;}
      .choose-tit{width:100%; height:80px; line-height:80px; font-size:20px; color:#666; text-align:center;}
      .album-list{padding:0px 0px 20px 0px;}
      .album-list .one{width:100%; padding:15px; background:#fff; border-bottom:3px solid #e8e8e8;}
      .album-list .one .left{width:150px; height:150px; display: block;}
      .album-list .one .left .head {
        width:150px; height:150px;
        background-repeat: no-repeat; background-size: 100%; background-position: center;
      }
      .album-list .one .right{padding-left:20px;}
      .album-list .one .w{height:100px; display:block;}
      .album-list .one .tit{
        width:100%; margin-top:5px; line-height:22px; font-size:18px; color:#000; font-weight:bold;
      }
      .album-list .one .info{line-height:20px; margin-top:5px; font-size:14px; color:#999;}
      .album-list .one .b{height:50px;}
      .album-list .one .b .btn{
        width:80px; height:40px; line-height:40px; color:#fff; font-size:15px; display:block; text-align:center;
        border: none; float:left; margin-right:8px; border-radius:5px;
      }
      .album-list .one .b .try{background:#ff9800;}
      .album-list .one .b .enter{background:#62c3d0;}
    </style>
</head>
<body>
  <div id="App" class="main hide">
    <div class="choose-tit">请选择讲解风格</div>
    <div class="album-list">
      <div class="one" v-for="(v, k) in albums">
        <div class="dflex">
          <div class="left">
            <div class="head" @click="gotoPlay(k);" :style="{backgroundImage:'url('+files[v.head]+')'}">&nbsp;</div>
          </div>
          <div class="right flex-1">
            <div class="w">
              <div @click="gotoPlay(k);" class="tit">{{v.title}}</div>
              <div @click="gotoPlay(k);" class="info">{{v.author}} &nbsp; {{v.signature}}</div>
            </div>
            <div class="b dflex">
              <div type="button" class="btn try" v-if="v.audio" @click="play(k);">
                <span v-if="playing.k==k">
                  <img src="../image/playing2.gif"> {{playing.duration-playing.current}}"
                </span>
                <span v-else>试听</span>
              </div>
              <div @click="gotoPlay(k);" class="btn enter">进入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
var vue;
apiready = function(){
  vue = new Vue({
      el: '#App',
      data: {
        did:0,
        name:'',
        files:[],
        albums:{},

        audio:null,

        playing:{
          k:-1,         //当前播放的对象k
          paused:true,
          duration:0,
          current:0,
        },
      },
      methods: {
          play:function(k){
            var that = this;
            if(k == that.playing.k){
              if(that.playing.paused){
                that.playEvt(k);
              }else{
                that.audio.pause();
                that.playing.paused = true;
              }
            }else{
              that.audio.stop();
              that.playEvt(k);
            }
          },
          playEvt:function(k){
            var that = this;
            that.playing.k = k;
            that.audio.play({
                path: that.files[that.albums[k].audio]
            }, function(ret, err) {
                if (ret) {
                  if(ret.complete==false){
                    that.playing.paused = false;
                    that.playing.duration = ret.duration;
                    that.playing.current = ret.current;
                  }else{
                    //播放完毕，下一曲
                    that.playing.paused = true;
                    that.playing.k = -1;
                  }
                }
            });
          },
          gotoPlay: function(k){
            var that = this;

            that.audio.stop();
            that.playing.paused = true;
            that.playing.k = -1;


            var aid = that.albums[k].album_id;
            var speecherPic = that.albums[k].head;
            api.openWin({
                name: 'Play',
                url: 'Play.html',
                pageParam: {did:that.did, aid:aid, name:that.name, speecherPic:speecherPic}
            });
          },
      },
      created: function() {
        var that = this;

        var did = api.pageParam.did;
        that.did = did;

        that.name = api.pageParam.name;

        that.files = $api.getStorage('files');

        var albums = $api.getStorage('albums')[did];
        that.albums = albums;

        that.audio = api.require('audio');

        $api.removeCls($api.byId('App'), 'hide');

        setTimeout(function(){
          api.parseTapmode();
        }, 1000);

      }
  });
}

</script>
</html>
